<template>
  <scroll-view :scroll-y="true" class="h-100p w-100p">
    <view class="container-body" v-if="exceed">
      <text class="unusual">
        超掘超采预警
      </text>
      <view class="reserves u-p-10 plan">
        <view class="flex mine-detail">
          <text>临近准掘允采预警</text>
        </view>
        <view class="mine-grid">
          <u-grid :col="4">
            <u-grid-item @click="detail('临近地测预报', exceed.nearGeodeticPredictionDict, 0)">
              <view class="grid-text">
                <text class="infoC">{{ exceed.nearGeodeticPrediction }}</text>
              </view>
              <view class="grid-text">临近地测预报</view>
            </u-grid-item>
            <u-grid-item @click="detail('临近探放水', exceed.nearExploringWaterDict, 0)">
              <view class="grid-text">
                <text class="infoC">{{ exceed.nearExploringWater }}</text>
              </view>
              <view class="grid-text">临近探放水</view>
            </u-grid-item>
            <u-grid-item @click="detail('临近区域防突', exceed.nearRegionalOutburstPreventionDict, 0)">
              <view class="grid-text">
                <text class="infoC">{{ exceed.nearRegionalOutburstPrevention }}</text>
              </view>
              <view class="grid-text">临近区域防突</view>
            </u-grid-item>
            <u-grid-item @click="detail('临近局部防突', exceed.nearLocalProtrusionDict, 0)">
              <view class="grid-text">
                <text class="infoC">{{ exceed.nearLocalProtrusion }}</text>
              </view>
              <view class="grid-text">临近局部防突</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <view class="reserves u-p-10 plan" style="background-color: #ffe6e7;">
        <view class="flex mine-detail">
          <text>超出准掘允采预警</text>
        </view>
        <view class="mine-grid">
          <u-grid :col="4">
            <u-grid-item @click="detail('超出地测预报', exceed.overstepGeodeticPredictionDict, 1)">
              <view class="grid-text">
                <text class="errorC">{{ exceed.overstepGeodeticPrediction }}</text>
              </view>
              <view class="grid-text">超出地测预报</view>
            </u-grid-item>
            <u-grid-item @click="detail('超出探放水', exceed.overstepExploringWaterDict, 1)">
              <view class="grid-text">
                <text class="errorC">{{ exceed.overstepExploringWater }}</text>
              </view>
              <view class="grid-text">超出探放水</view>
            </u-grid-item>
            <u-grid-item @click="detail('超出区域防突', exceed.overstepRegionalOutburstPreventionDict, 1)">
              <view class="grid-text">
                <text class="errorC">{{ exceed.overstepRegionalOutburstPrevention }}</text>
              </view>
              <view class="grid-text">超出区域防突</view>
            </u-grid-item>
            <u-grid-item @click="detail('超出局部防突', exceed.overstepLocalProtrusionDict, 1)">
              <view class="grid-text">
                <text class="errorC">{{ exceed.overstepLocalProtrusion }}</text>
              </view>
              <view class="grid-text">超出局部防突</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <text class="unusual">
        采掘失调预警
      </text>
      <view class="warNum">
        <view class="number-title" @click="detail('采掘失调预警', digging.diggingMaladjustmentWarningDict, 2)">
          <view class="unusual-number errorC">
            {{ digging.diggingMaladjustmentWarning }}
          </view>
          <view class="tCenter">
            采掘失调预警
          </view>

        </view>
        <view class="number-title" style="margin-left: 24rpx;"
          @click="detail('采掘预失调预警', digging.diggingprepareMaladjustmentWarningDict, 2)">
          <view class="unusual-number infoC" style="padding-left: 20rpx;">
            {{ digging.diggingprepareMaladjustmentWarning }}
          </view>
          <view class="tCenter">
            采掘预失调预警
          </view>

        </view>
      </view>
      <text class="unusual">
        未填报预警
      </text>
      <view class="reserves u-p-10" style="height: 470rpx;background-color: #fff;">
        <view class="mine-grid">
          <u-grid :col="3">
            <u-grid-item @click="detail('计划未填报', notReported.planNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.planNotReported }}</text>
              </view>
              <view class="grid-text">计划未填报</view>
            </u-grid-item>
            <u-grid-item @click="detail('原煤产量未填报', notReported.rawCoalProductionNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.rawCoalProductionNotReported }}</text>
              </view>
              <view class="grid-text">原煤产量未填报</view>
            </u-grid-item>
            <u-grid-item @click="detail('电煤未填报', notReported.electricCoalNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.electricCoalNotReported }}</text>
              </view>
              <view class="grid-text">电煤未填报</view>
            </u-grid-item>
          </u-grid>
        </view>
        <view class="mine-grid">
          <u-grid :col="3">
            <u-grid-item @click="detail('掘进进尺未填报', notReported.excavationFootageNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.excavationFootageNotReported }}</text>
              </view>
              <view class="grid-text">掘进进尺未填报</view>
            </u-grid-item>
            <u-grid-item @click="detail('地测预报未填报', notReported.geodeticWarningNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.geodeticWarningNotReported }}</text>
              </view>
              <view class="grid-text">地测预报未填报</view>
            </u-grid-item>
            <u-grid-item @click="detail('探放水未填报', notReported.exploringWaterNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.exploringWaterNotReported }}</text>
              </view>
              <view class="grid-text">探放水未填报</view>
            </u-grid-item>
          </u-grid>
        </view>
        <view class="mine-grid">
          <u-grid :col="3">
            <u-grid-item @click="detail('区域防突未填报', notReported.regionalOutburstPreventionNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.regionalOutburstPreventionNotReported }}</text>
              </view>
              <view class="grid-text">区域防突未填报</view>
            </u-grid-item>
            <u-grid-item @click="detail('局部防突未填报', notReported.localProtrusionNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.localProtrusionNotReported }}</text>
              </view>
              <view class="grid-text">局部防突未填报</view>
            </u-grid-item>
            <u-grid-item @click="detail('采掘工程关键环节管控未填报', notReported.controlNotReportedDict, 3)">
              <view class="grid-text">
                <text class="primC">{{ notReported.controlNotReported }}</text>
              </view>
              <view class="grid-text">采掘工程关键环节管控未填报</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <text class="unusual" v-if="swiperCurrent != 1">
        计划异常预警
      </text>
      <view class="warNum" v-if="swiperCurrent != 1">
        <view class="number-title" @click="tosual">
          <view class="unusual-number errorC">
            {{ plan }} 家
          </view>
          <view class="tCenter">
            计划异常预警
          </view>

        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    listData: {
      type: Object,
      required: true
    },
    swiperCurrent: {
      type: Number,
      required: true
    },

    customerId: {
      type: String,
      required: true
    },
    customerStr: {
      type: String,
      // required: true
    },
    countyStr: {
      type: String,
    },
  },
  data() {
    return {
      triggered: false, // 下拉刷新
      // digging:{},//采掘失调预警
      // exceed:{},//超倔超采预警
      // notReported:{},//未填报预警
      // plan:{},//计划预警异常
    };
  },
  computed: {
    digging() {
      return this.listData.diggingImbalanceVo
    },
    exceed() {
      return this.listData.exceedExcavationVo
    },
    notReported() {
      return this.listData.notReportedWarningVo
    },
    plan() {
      return this.listData.planWarning
    },


  },
  mounted() {

  },
  methods: {
    detail(title, type, flag) {
      //type:当前选中字典,title:当前选中文本，falg:判断类别
      let info = ''
      if (flag == 0) {
        info = '临近准掘允采预警'
      } else if (flag == 1) {
        info = '超出准掘允采预警'
      } else if (flag == 2) {
        info = '采掘失调预警'
      } else {
        info = '未填报预警'
      }
      let item = { title, swiperCurrent: this.swiperCurrent, info, type,
         customerId: this.customerId, customerStr: this.customerStr, 
         countyStr: this.countyStr}
      uni.navigateTo({
        url: './details?item=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    tosual(item) {
      let op = { customerId: this.customerId, customerStr: this.customerStr , countyStr: this.countyStr}
      uni.navigateTo({
        url: './sualDeatail?item=' + encodeURIComponent(JSON.stringify(op))
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.unusual::after {
  position: absolute;
  content: "";
  left: 0;
  top: -6rpx;
  height: 26rpx;
  width: 4rpx;
  transform: translateY(50%);
  background-color: #043470;
}

.unusual {
  font-weight: bold;
  font-size: 30rpx;
  position: relative;
  margin-bottom: 0;
  padding-left: 22rpx;
}

.unusual-number {
  color: red;
  text-align: center;
}

.number-title {
  width: 340rpx;
  height: 160rpx;
  display: inline-block;
  background-color: #fff;
  line-height: 70rpx;
  // padding-left: 76rpx;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}

.grid-text {
  font-size: 24rpx;
  margin-top: 16rpx;
  text-align: center;
}

.mine-detail {
  justify-content: space-between;
  margin: 0 0 10rpx 16rpx;
}

.reserves {
  width: 100%;
  height: 240rpx;
  background-color: #e9f1ff;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}

.reserves.plan {
  background-color: #ffefce;
  height: 210rpx;
}

/deep/ .u-grid-item {
  height: 150rpx;
  border-radius: 10rpx;
}

.warNum {
  margin-top: -16rpx;
}

.infoC {
  color: #d7a924;
  font-weight: 700;
}

.primC {
  color: #506fff;
  font-weight: 700;
}

.errorC {
  color: #fb718c;
  font-weight: 700;
}

.tCenter {
  text-align: center;
}</style>